<!--
 * @Author: Aaron Huang
 * @Date: 2022-10-19 09:52:54
 * @LastEditors: Aaron Huang
 * @LastEditTime: 2022-11-04 17:10:41
 * @Description: file content
 * @FilePath: \ias_ui\src\components\newTable\index.vue
 * @Company: 沃尔玛
-->
<template>
  <div class="ess-table-page">
    <slot name="table-header" />
    <slot name="container" />
    <div :id="`table_id_${id}`" class="ess-table-content">
      <el-table ref="elTableRef" :height="tableHeight" :data="tableData" v-bind="getTableAttr" style="width: 100%" @selection-change="selectionChange">
        <el-table-column v-for="item in tableColumns" :key="item.label" v-bind="getColumnAttr(item)">
          <template v-if="item.slotName || item.type === 'expand'" v-slot="scope">
            <slot :name="item.slotName || 'expand'" :scope="scope" />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      v-if="paginationShow"
      :current-page.sync="pageParams.pageNum"
      :page-size="pageParams.pageSize"
      class="pager"
      small
      :total="total"
      v-bind="getPaginationAttr"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <slot name="table-footer" />
  </div>
</template>

<script>
export default {
  props: {
    tableAttr: {
      type: Object,
      required: false,
      default() {
        return {}
      }
    },
    tableColumns: {
      type: Array,
      required: true
    },
    paginationAttr: {
      type: Object,
      default() {
        return {}
      }
    },
    paginationShow: {
      type: Boolean,
      default: true
    },
    tableData: {
      type: Array,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    pageParams: {
      type: Object,
      default() {
        return {
          pageNum: 1,
          pageSize: 10
        }
      }
    }
  },
  data() {
    return {
      id: parseInt(Math.random() * (10000 - 0 + 1) + 0, 10),

      tableHeight: 0,

      resizeObserverObj: null,

      columnInitialAttr: {
        align: 'center',
        'show-overflow-tooltip': true
      },

      paginationInitialAttr: {
        layout: 'total, sizes, prev, pager, next, jumper',
        'page-sizes': [10, 50, 100, 500]
      },

      tableInitialAttr: {
        stripe: true,
        border: true,
        size: 'small',
        'highlight-current-row': true
      }
    }
  },
  computed: {
    getTableAttr() {
      return { ...this.tableInitialAttr, ...this.tableAttr }
    },
    getPaginationAttr() {
      return { ...this.paginationInitialAttr, ...this.paginationAttr }
    }
  },
  mounted() {
    this.resizeObserverFun()
  },
  activated() {
    if (this.isKeepAlive) this.resizeObserverFun()
  },
  deactivated() {
    this.isKeepAlive = true
    this.resizeObserverObj.disconnect()
  },
  beforeDestroy() {
    this.resizeObserverObj.disconnect()
  },
  methods: {
    getColumnAttr(v) {
      return { ...this.columnInitialAttr, ...v }
    },
    clearSelection() {
      this.$refs.elTableRef.clearSelection()
    },
    selectionChange(v) {
      this.$emit('selectionChange', v)
    },
    handleCurrentChange(v) {
      this.pageParams.pageNum = v
      this.$emit('pageParamsChange', this.pageParams)
    },
    handleSizeChange(v) {
      this.pageParams.pageSize = v
      this.handleCurrentChange(1)
    },
    setHeight() {
      this.tableHeight = document.querySelector(`#table_id_${this.id}`).offsetHeight
    },
    resizeObserverFun() {
      this.resizeObserverObj = new ResizeObserver(this.setHeight)
      this.resizeObserverObj.observe(document.querySelector(`#table_id_${this.id}`))
    }
  }
}
</script>

<style lang="scss" scoped>
.ess-table-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 20px;

  .ess-table-content {
    flex: 1;
    overflow: hidden;
    min-height: 300px;
  }

  .pager {
    display: flex;
    justify-content: right;
    padding: 8px 0;
  }
}
</style>
